<template>
  <div class="timer_str">
    <span class="timer_str_time">{{ time }}</span>
    <span class="timer_str_year">{{ year }}<br />{{ week }}</span>
    <span v-if="weatherIconUrl">
      <img
        :src="weatherIconUrl"
        alt="天气图标"
        width="30px"
        height="30px"
        style="margin-left: 10px"
      />
    </span>
  </div>
</template>

<script lang="ts" setup>
import { useDateFormat, useNow } from "@vueuse/core";
import { ref, onMounted } from "vue";
import axios from "axios";
import sunny from "@/assets/weather/sunny.png";
import cloudy from "@/assets/weather/cloudy.png";
import overcast from "@/assets/weather/overcast.png";
import rainy from "@/assets/weather/rainy.png";
import heavy_rain from "@/assets/weather/heavy_rain.png";
import thunderstorm from "@/assets/weather/thunderstorm.png";
import typhoon from "@/assets/weather/typhoon.png";
import fog from "@/assets/weather/fog.png";

// 时间相关响应式数据
const time = useDateFormat(useNow(), "HH:mm:ss");
const year = useDateFormat(useNow(), "YYYY-MM-DD");
const week = useDateFormat(useNow(), "dddd");
const weatherIconUrl = ref("");

// 海南陵水县常见天气状况，根据实际气候特点排序
const weatherConditions = [
  "晴",
  "多云",
  "阴",
  "小雨",
  "中雨",
  "大雨",
  "雷阵雨",
  "台风",
  "雾",
  "霾",
];

// 生成基于时间的相对稳定的模拟天气
const getSimulatedWeather = (): string => {
  const now = new Date();
  const hour = now.getHours();
  const day = now.getDate();
  const index = (day * 24 + hour) % weatherConditions.length;
  return weatherConditions[index];
};

// 优化的天气代码映射 - 基于海南实际天气特点
const getWeatherByCode = (code: number): string => {
  // 简化的天气代码映射，专注于海南可能出现的天气类型
  switch (true) {
    case code === 0:
      return "晴"; // 晴天
    case code >= 1 && code <= 3:
      return code === 3 ? "阴" : "多云"; // 多云和阴天
    case code >= 40 && code <= 50:
      return "雾"; // 各种雾和霾
    case code >= 51 && code <= 63:
      return code >= 61 ? "小雨" : "小雨"; // 毛毛雨和小雨
    case code === 64:
      return "中雨"; // 中雨
    case code === 65:
      return "大雨"; // 大雨
    case code >= 66 && code <= 70:
      return "小雨"; // 冻雨和雨夹雪（海南罕见但保留映射）
    case code === 80:
      return "小雨"; // 小阵雨
    case code === 81:
      return "中雨"; // 中阵雨
    case code === 82:
      return "大雨"; // 大阵雨
    case code >= 95 && code <= 97:
      return "雷阵雨"; // 雷暴
    case code === 98 || code === 99:
      return "台风"; // 强雷暴映射为台风预警
    default:
      return "晴"; // 默认晴天
  }
};

// 优化的天气图标映射
const mapWeatherToIconUrl = (weather: string): string => {
  const iconMap: Record<string, string> = {
    晴: sunny,
    多云: cloudy,
    阴: overcast,
    小雨: rainy,
    中雨: rainy,
    大雨: heavy_rain,
    暴雨: heavy_rain,
    雷阵雨: thunderstorm,
    台风: typhoon,
    雾: fog,
    霾: fog,
  };
  return (
    iconMap[weather] ||
    Object.entries(iconMap).find(([key]) => weather.includes(key))?.[1] ||
    sunny
  );
};

// 获取天气数据
const getWeather = async () => {
  try {
    const URL =
      "https://api.open-meteo.com/v1/forecast?latitude=18.4841&longitude=109.8488&current_weather=true&timezone=Asia%2FShanghai";
    const response = await axios.get(URL);

    // 处理API响应
    if (response.data?.current_weather) {
      const weather = getWeatherByCode(
        response.data.current_weather.weathercode
      );
      weatherIconUrl.value = mapWeatherToIconUrl(weather);
    } else {
      // 数据格式不正确时使用模拟数据
      weatherIconUrl.value = mapWeatherToIconUrl(getSimulatedWeather());
    }
  } catch (error) {
    // API调用失败时回退到模拟数据
    weatherIconUrl.value = mapWeatherToIconUrl(getSimulatedWeather());
  }
};

// 组件挂载时初始化
onMounted(() => {
  // 直接调用获取天气函数，函数内部会设置默认值
  getWeather();
});
</script>

<style scoped lang="scss">
.timer_str {
  font-family: DingTalk-JinBuTi;
  font-size: 0.83333vw;
  color: #dbfaff;
  letter-spacing: 0;
  line-height: 1.04167vw;
  font-weight: 400;
  position: absolute;
  top: 1.5625vw;
  right: 0;
  width: 16.66667vw;
  height: 2.08333vw;
  text-align: left;
  display: flex;
  align-items: center;
  span {
    height: 1.04167vw;
    margin: 0.67708vw 0.72917vw 0 0;
    width: 5.20833vw;
  }
}
.timer_str_time {
  font-size: 1.1vw;
  border-right: #d4d7d7 1px solid;
}
.timer_str_year {
  font-size: 0.69444vw;
  border-right: #d4d7d7 1px solid;
}
</style>
